<template>
	<view class="page">
		<block v-if="!userInfo.email">
			<view class="input-wrapper" :class="!!focus1 ? 'on' : ''">
				<input class="input-s" type="text" @focus="focus1 = true" @blur="focus1 = false" :placeholder="i18n.emailNum"
				 placeholder-class="placeholder-class" v-model="email" />
			</view>
			<view class="input-wrapper" :class="!!focus2 ? 'on' : ''">
				<input class="input-s" type="number" :maxlength="6" @focus="focus2 = true" @blur="focus2 = false" :placeholder="i18n.emailCode"
				 placeholder-class="placeholder-class" v-model="code" />
				<verificationCode ref="bindEmailCodeRef" @send="sendCode" />
			</view>
			<button class="btn-block" hover-class="btn-hover" @click="submit">{{i18n.save}}</button>
		</block>
		<block v-else>
			<view class="item">
				<text>{{i18n.email}}</text>
				<text>{{ userInfo.email_hide || '' }}</text>
			</view>
			<view class="item">
				<text>{{i18n.emailVerify}}</text>
				<switch class="switch" :checked="checked" color="#2F54EB" :disabled="true" @click="handleSwitchClick" />
			</view>
			<safetyVerification ref="safetyVerificationRef" :userInfo="userInfo" requestUrl="api/sms/verifyswitch" @affirm="handleAffirm" type="switch_email"/>
		</block>
	</view>
</template>

<script>
	import verificationCode from '@/components/verificationCode.vue'
	import safetyVerification from '@/components/safetyVerification.vue'
	import {isEmail} from '../../utils/val.js'	
	export default {
		components: {
			verificationCode,
			safetyVerification,
		},
		data() {
			return {
				userInfo: {},
				email: '',
				code: '',
				focus1: false,
				focus2: false,
				checked: false,
				
			}
		},
		onShow() {
			this.fetchUserInfo()
			uni.setNavigationBarTitle({
			   title: this.$t('safe.bindEmail')
			})
		},
		computed:{
			i18n() {
				return this.$t('safe');
			}
		},
		methods: {
			fetchUserInfo() {
				let userInfo = this.$getStore('ucenterInfo', true)
				this.userInfo = userInfo
				this.$post('api/ucenter/info')
					.then(res => {
						let userInfo = res.data
						this.userInfo = userInfo
						this.$setStore('ucenterInfo', userInfo ,true)
						if (userInfo.email_open) {
							this.checked = true
						}
					})
			},
			sendCode() {
				if (!this.email) return this.$toast(this.$t('safe.emailNum'))
				if (!isEmail(this.email)) return this.$toast(this.$t('safe.amailError'))
				this.$refs.bindEmailCodeRef.startRequest()
				this.$post('api/sms/bind', {
						account: this.email,
						type: 'email'
					})
					.then(res => {
						this.$refs.bindEmailCodeRef.sendEnd('success')
						this.$toast(res.msg)
					})
					.catch(err => {
						this.$refs.bindEmailCodeRef.sendEnd('error')
					})
			},
			submit() {
				const {
					email,
					code
				} = this
				if (!isEmail(this.email)) return this.$toast(this.$t('safe.amailError'))
				if (!email || !code) return this.$toast(this.$t('safe.complete'))
				this.$post('api/ucenter/bind', {
						account: email,
						code,
						type: 'email'
					})
					.then(res => {
						this.$toast(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					})
			},
			handleSwitchClick() {
				if(!this.userInfo.mobile_open && this.userInfo.email_open ){
					this.$toast(this.$t('safe.keep'))
				}else{
					this.$refs.safetyVerificationRef.show()
				}
				
			},
			handleAffirm(data){
				this.$post('api/ucenter/verifyswitch', {
					type: 'email',
					...data
				})
				.then(res => {
					this.$toast(res.msg)
					this.checked = !this.checked
					console.log(this.checked)
					this.userInfo = {
						...this.userInfo,
						email_open: this.checked
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.switch {
		transform: scale(0.8)
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 0;
		border-bottom: 1px var(--border) solid;
	}

	.page {
		padding-top: 20upx;
		padding: 40upx 30upx 0;
		font-size: 28upx;

		.input-wrapper {
			position: relative;
			height: 100upx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid var(--border);
			margin-bottom: 30upx;

			.input-s {
				flex: 1;
			}

			&.on {
				border-color: var(--theme-color);
			}

			.code {
				position: absolute;
				top: 0;
				right: 0;
				color: var(--theme-color);
				line-height: 100upx;

				&.gray {
					color: #9dacb9;
				}
			}
		}

		.btn {
			margin-top: 100upx;
		}
	}
</style>
